<template>
  <div v-title="'订单详情 - 世外生活运营平台'">
    <mk-breadcrumb  :breadcrumb-data="breadcrumbData"></mk-breadcrumb>
    <el-scrollbar :wrapStyle="[{maxHeight:(bodyHeight - fixedHeightSmall-(showAudit?58:0))+'px'}]">
    <div class="content-box MkOrderDetail" :style="{'margin-bottom':orderStatus=='waitAudit'?0:'40px'}">
      <div class="MkOrderDetailContent">
        <div class="content">
          <div class="order_info">
            <div class="head">订单信息</div>
            <div class="info_content">
              <div class="row">
                <div class="item"><span class="title">订单号</span>{{treatedOrderData.orderInfo.orderNumber}}</div>
                <div class="item"><span class="title">订单状态</span>{{treatedOrderData.orderStatus.status | formatOrderStatus}}<span v-if="treatedOrderData.orderStatus.status==='Shared'">，差{{treatedOrderData.orderStatus.surplusPeopleAmount}}人</span></div>
              </div>
              <div class="row">
                <div class="item"><span class="title">下单时间</span>{{treatedOrderData.orderInfo.orderTime | formatDate}}</div>
                <div class="item"><span class="title">审核状态</span>{{treatedOrderData.orderStatus.auditStatus | formatAuditStatus}}</div>
              </div>
              <div class="row">
                <div class="item"><span class="title">付款时间</span>{{treatedOrderData.orderInfo.payTime | formatDate}}</div>
                <div class="item expressWay"><span class="title">配送方式</span>{{treatedOrderData.buyersInfo.expressWay}}</div>
              </div>
              <div class="row">
                <div class="item"><span class="title">支付方式</span>{{treatedOrderData.orderInfo.payWay | formatPayWay}}</div>
              </div>
            </div>
          </div>
          <div class="goods_info">
            <div class="head">商品信息</div>
            <div class="gray_bg">
              <el-table
                :cell-class-name="filterProductName"
                :data="treatedOrderData.goodsDetail"
                @cell-click="clickCell"
                style="width: 100%;margin-bottom: 20px">
                <el-table-column
                  prop="goodName"
                  label="商品名称"
                  show-overflow-tooltip
                  width="300px">
                  <!--<template slot-scope="scope">-->
                    <!--<span class="primaryColor">{{scope.row.goodName}}</span>-->
                  <!--</template>-->
                </el-table-column>
                <el-table-column
                  prop="shopName"
                  show-overflow-tooltip
                  label="下单站点"
                  width="">
                </el-table-column>
                <el-table-column
                  width='120px'
                  prop="goodsCode"
                  show-overflow-tooltip
                  label="商品条形码">
                </el-table-column>
                <el-table-column
                  width='120px'
                  prop="attrDescription"
                  show-overflow-tooltip
                  :formatter="formatAttrDescription"
                  label="商品规格">
                </el-table-column>
                <el-table-column
                  width=''
                  prop="price"
                  show-overflow-tooltip
                  label="单价（元）">
                </el-table-column>
                <el-table-column
                  prop="amount"
                  width=''
                  show-overflow-tooltip
                  label="数量">
                </el-table-column>
                <el-table-column
                  prop="subtotal"
                  width=''
                  label="小计（元）">
                </el-table-column>
              </el-table>
            </div>
            <div class="row">
              <div class="item"><span class="title">商品合计</span>￥{{treatedOrderData.orderInfo.shouldPay}}</div>
            </div>
            <div class="row">
              <div class="item"><span class="title">运费</span>￥{{treatedOrderData.orderInfo.transportMoney}}</div>
            </div>
            <div class="row">
              <div class="item"><span class="title">优惠</span>￥{{treatedOrderData.orderInfo.preferentialAmount?treatedOrderData.orderInfo.preferentialAmount:'0'}}</div>
            </div>
            <div class="row">
              <div class="item"><span class="title">实付款</span>￥{{treatedOrderData.orderInfo.realPay}}</div>
            </div>
          </div>
          <div class="buyer_info">
            <div class="head">买家信息</div>
            <div class="info_content">
              <div class="left">
                <div class="item"><span class="title">昵称</span>{{treatedOrderData.buyersInfo.customerName}}</div>
                <div class="item"><span class="title">收货人</span>{{treatedOrderData.buyersInfo.deliveryName}}</div>
                <div class="item"><span class="title">联系方式</span>{{treatedOrderData.buyersInfo.deliveryPhone}}</div>
                <!--<div class="item"><span class="title">配送方式</span>{{treatedOrderData.buyersInfo.deliveryWay}}</div>-->
              </div>
              <div class="right">
                <div class="item"><span class="title">收货地址</span>{{treatedOrderData.buyersInfo.deliveryAddress}}</div>
                <div class="item"><span class="title">买家留言</span>{{treatedOrderData.buyersInfo.leavingMessage}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--<div class="shure" v-if="treatedOrderData.orderStatus.auditStatus=='WaitAudit'&&treatedOrderData.orderStatus.status=='Finished'">-->
        <!--<div class="shure" v-if="orderStatus=='waitAudit' ">-->
        <div class="shure" v-if="showAudit">
          <button  @click="showDialog_= true" >审核</button>
        </div>
      <!--</div>-->
    </div>
    </el-scrollbar>
      <el-dialog title="订单审核" :visible.sync="showDialog_" custom-class='dialog_right  dialogScroll_add' top="0%" @close='closeDialog("checkForm")' @open='openDialog'>
      <el-form  ref="checkForm"  :rules="checkForm.rules" label-width="80px" :model="checkForm.formItem">
        <el-form-item label="审核状态" prop='auditType'>
          <el-select  placeholder="" @change='' v-model='checkForm.formItem.auditType' placeholder="请选择">
            <el-option label="有效订单" value="Valid"></el-option>
            <el-option label="无效订单" value="Invalid"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            type="textarea"
            :rows="9"
            placeholder="请输入"
            resize="none"
            @change='' v-model='checkForm.formItem.remark' >
            <!--v-model="remark"-->
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer footerStyle">
        <el-button  type="primary" class="btn-primary" element-loading-text="提交中" @click='submitForm("checkForm")' v-loading.fullscreen.lock="fullscreenLoading">提交</el-button>
        <el-button type="primary" class='btn-cancel'   @click="showDialog_= false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import MkBreadcrumb from '../../components/MkBreadcrumb.vue'
  import orderService from './../../services/order'
  import {mapState} from 'vuex'
  export default {
    name: 'MkOrderDetail',
    data () {
      return {
        checkForm: {
          formItem: {
            id:'',
            remark:'',
            auditType:'',
          },
          rules:{
            auditType: {required: true,message: '请选择'}
          }
        },
        screenHeight: document.body.clientHeight,
        treatedOrderData: {
          orderInfo:[],
          buyersInfo:[],
          goodsDetail:[],
          orderStatus:[],
        },
        breadcrumbData:{
          list:[
            {name:'订单管理',path: null, clickAble: false},
           {name: '订单列表',path: null, clickAble: true,query:null},
            {name:'订单详情',path:null,clickAble:false}
          ],
          returnData: {
            isReturn: true, path: null,query:null
          },
          iconName: 'order-icon',
        },
        fullscreenLoading: false,
        showDialog_:false,
        showAudit: false
      }
    },
    computed: mapState({
      bodyHeight: state => state.global.bodyHeight,
      fixedHeightSmall: state => state.global.fixedHeightSmall,
    }),
    methods: {
      filterProductName(param) {
        let {row, column, rowIndex, columnIndex} = param;
        if(columnIndex == 0) {
            return 'primaryColor';
        }
      },
      formatAttrDescription(row, column) {
        let attr = row.attrDescription;
        if(attr){
          let arr = attr.split('，');
          let str = '';
          for(var i = 0;i<arr.length;i++) {
            if(arr[i].split(":").length>1) {
              str += arr[i].split(':')[1];
            }
          }
          return str;
        }else{
            return '';
        }
      },
      clickCell(row, column, cell, event) {
        if(column.label==='商品名称') {
          this.$router.push({path: '/orderSnapshot', query: {orderId: this.id, bread: this.breadcrumbData.list[1]}});
        }
      },
      submitForm(formName) {
        this.$refs[formName].validate(valid=>{
          if(valid) {
            let form = this.checkForm.formItem;
            form.id = this.id;
            this.fullscreenLoading=true;
            orderService.loadAuditOrderServer(form,(data)=>{
              this.$message.success('审核成功');
              this.showDialog_=false;
              this.fullscreenLoading=false;
              this.loadData();
            },(data)=>{
              this.fullscreenLoading=false;
            })
          }
        })

      },
      formatDate(row, column, cellValue){
        if(cellValue === null){
          return '';
        }
        return new Date(cellValue).pattern("yyyy-MM-dd HH:mm")
      },
      loadData() {
        let path = this.$route.query.path;
        let tab = this.$route.query.tab;
        this.breadcrumbData.list[1].path = path;
        this.breadcrumbData.list[1].query = {tab: tab};
        this.breadcrumbData.returnData.path = path;
        this.breadcrumbData.returnData.query = {tab: tab};

        if(path == '/orderAuditMgt'){
          this.breadcrumbData.list[1].name = '订单审核';
        }else{
          this.breadcrumbData.list[1].name = '订单列表';
        }
        this.id=this.$route.query.id;
        orderService.loadOrderDetailServer({id:this.id},data=>{
          this.treatedOrderData=data.data;
       this.showAudit = this.treatedOrderData.orderStatus.auditStatus === 'WaitAudit' &&   this.treatedOrderData.orderStatus.status === 'Finished'
//          console.log(this.treatedOrderData);
        })
      },
      closeDialog(formName){
        this.$refs[formName].resetFields();
      },
      openDialog(){},
    },
    mounted: function() {
//      let status = this.$route.query.status;
//      this.orderStatus='waitAudit'
//      console.log(status);
//      this.loadData();
    },
    activated(){
      this.loadData();
    },
    filters:{
      formatOrderStatus(cellValue){
        if(cellValue=='WaitPay'){
          return '待付款'
        }else if(cellValue=='WaitDeliver'){
          return '待发货'
        }else if(cellValue=='Delivered'){
          return '已发货'
        }else if(cellValue=='Finished'){
          return '已完成'
        }else if(cellValue=='Closed'){
          return '已关闭'
        }else if (cellValue=='SingleSuccess'){
          return '拼单成功，等到卖家发货'
        }else if (cellValue=='SingleFail'){
          return '拼单未成功，已退款'
        }else if (cellValue=='Shared'){
          return '待分享'
        }
      },
      formatAuditStatus(cellValue){
        if(cellValue=='WaitAudit'){
          return '待审核'
        }else if(cellValue=='Invalid'){
          return '无效订单'
        }else if(cellValue=='Valid'){
          return '有效订单'
        }
      },
      formatDate(cellValue){
        if(cellValue === null){
          return '';
        }
        return new Date(cellValue).pattern("yyyy-MM-dd HH:mm")
      },
      formatPayWay(cellValue){
        if(cellValue === "None"){
          return "  "
        }
        if(cellValue === "WeiXin"){
          return "微信"
        }
        if(cellValue === "ZhiFuBao"){
          return "支付宝"
        }
      },
    },
    components:{
      MkBreadcrumb
    }
  }
</script>
<style lang="less">
  @import '../../assets/style/main.less';
  .MkOrderDetail{
    .MkOrderDetailContent{
      background: white;
      padding: 60px 0 40px;
      font-size: 14px;
    }
    .content{
      width: 1030px;
      margin:  0 auto;
    }
    .item{
      display: inline-block;
      margin-right: 30px;
      width: 230px;
      line-height: 30px;
      color: @fontColorTwo;
      &.expressWay{
        width: 600px;
      }
      .title{
        display: inline-block;
        margin-right: 15px;
        width: 60px;
        text-align: right;
        color: @fontColorThree;
      }
    }
    .head{
      font-size: 20px;
      font-weight: 500;
      margin-bottom: 10px;
    }
    .order_info,.goods_info,.buyer_info{
      margin-bottom: 50px;
      position: relative;
    }
    .buyer_info .info_content{
      display: -webkit-box;
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
    }
    .buyer_info .left{
      width: 260px;
    }
    .buyer_info .right{
      -webkit-box-flex: 1;
      -moz-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
    }
    .buyer_info .right .item{
      width: 100%;
      margin-right: 0;
      line-height: 20px;
    }
    .buyer_info .right .item:first-child{
      margin-bottom: 10px;
    }
    .goods_info tbody:after{
      content: "";
      width: 100%;
      height: 1px;
      position: absolute;
      bottom: 0;
      background: rgb(128, 128, 128);
      opacity: 0.1;
    }
    .goods_info {
      .primaryColor{
        div{
          color:@primaryColor!important;
          cursor:pointer;
          &:hover{
            .my-opacity();
          }
        }

      }
    }
    .info_content{
      background: #F6F7F8;
      padding: 30px;
    }
    .shure{
      background-color: @primaryColor;
      padding: 0px 40px;
      height: 100px;
      position:fixed;
      bottom:0;
      width:100%;
      max-width:1220px;
      button{
        height: 40px;
        color: @primaryColor;
        background-color: #ffffff;
        width: 120px;
        font-size: 14px;
        text-align: center;
        line-height: 40px;
        margin-top: 30px;
        margin-left: 30px;
        border: none;
        border-radius: 5px;
      }
    }
  }
  /*.auditForm{*/
    /*.el-form-item__label{*/
      /*width: 80px;*/
      /*text-align: right;*/
      /*padding-right: 10px;*/
    /*}*/
    /*.el-textarea {*/
      /*display: inline-block;*/
      /*width: 410px;*/
      /*margin-left: 14px;*/
      /*vertical-align: bottom;*/
    /*}*/
  /*}*/
</style>
